<template>
  <div>


	<myheader></myheader>

	<br /><br />
	<!-- 面包屑导航 -->
	<Breadcrumb :datas='datas'></Breadcrumb>


	<section class="featured-block text-center">
		<div class="container">
			<Avatar :src='src' :width='100' fit='fill'></Avatar>
            <a href="/goodsshow">商品列表</a>
		</div>
		<hr>
        <center>
            <div>
                商品名称:<input type="text" name="name" id="name" v-model="name"><br /><br />
                商品描述:<input type="text" name="desc" id="desc" v-model="desc"><br /><br />
                商品图片:<input type="file" @change="uploadimg"><br /><br />
                商品规格:
                <hr />
                颜色:<input type="text" name="color" id="color" v-model="color"><br /><br />
                厚度:<input type="text" name="season" id="season" v-model="season"><br /><br />
                
                <hr />
                商品类别:
                <!-- <input type="text" name="cid" id="cid" v-model="cid"><br /><br /> -->
                <Select name="cid" id="cid" @change="btn">
                    <option v-for="cate in cates" :value="cate.id">{{ cate.cname }}</option>
                </Select>
                <br /><br />



                演示视频:<input type="file" @change="uploadvideo">
                <video :src="'http://127.0.0.1:8000/static/upload/'+myvideo" width="200px"></video>
                <br /><br />
                关注数量:<input type="text" name="price" id="price" v-model="price"><br /><br /><hr>
                <button @click="submit">添加</button>
            </div>
        </center>


	</section>
	<myfooter></myfooter>

	
	

    
  </div>
  
</template>


 
<script>

// 组件包含
import header from './header.vue';
import footer from './footer.vue';




export default {
  data () {
    return {
	  // 面包屑导航数据
	  	datas: [
			{title: '首页', route:{name: 'index'}},
			{title: '商品添加', route:{name: 'goodscreate'}},
		],
        src:'',
        // 商品数据
        name:'',
        desc:'',
        color:'',
        season: '',
        price:'',
        myimg:'',
        myvideo:'',
        // 分类信息
        cates:"",
        cid: 1
    }
  },
  mounted:function(){
            this.get_user_img();
            this.get_goods_cate()

  },
  methods:{
      

	  	// 文件上传到django服务器
		uploadimg(e){
			let file = e.target.files[0];
			let parme = new FormData;
			let config = {
				'Content-Type': 'multipart/form-data'
			}
			parme.append('file',file)
			this.axios.post('http://127.0.0.1:8000/uploadfile/',parme,config).then((result)=>{
				// console.log(result.data);
				this.myimg = result.data.filename + '.' + result.data.filetype;
				// console.log(this.myimg)
			})
		},
		uploadvideo(e){
			let file = e.target.files[0];
			let parme = new FormData;
			let config = {
				'Content-Type': 'multipart/form-data'
			}
			parme.append('file',file)
			this.axios.post('http://127.0.0.1:8000/uploadfile/',parme,config).then((result)=>{
				// console.log(result.data);
				this.myvideo = result.data.filename + '.' + result.data.filetype;
				// console.log(this.myvideo)
			})
		},
		// 获取修改后的头像
		get_user_img(){
			this.axios.get('http://127.0.0.1:8000/userimg/',{params:{
				uid: localStorage.getItem('uid')
			}}).then((result)=>{
				// console.log(result.data);
				let img = result.data.img;
				this.src = 'http://localhost:8000/static/upload/' + img;
			})
        },
        submit(){
            let param_str = {'color':this.color,'serson':this.season};
            let param = JSON.stringify(param_str);
            console.log(param);
            this.axios.get('http://127.0.0.1:8000/goodscreate/',{params:{
                'name': this.name,
                'desc': this.desc,
                'img': this.myimg,
                'param': param,
                'cid': this.cid,
                'price': this.price,
                'video': this.myvideo
			}}).then((result)=>{
				console.log(result.data);
			})
        },
        get_goods_cate(){
			this.axios.get('http://127.0.0.1:8000/cateinfo/').then((result)=>{
                // console.log(result.data);
                this.cates = result.data;
                // console.log(this.cates)
			})
        },
        btn(e){
           this.cid = e.target.value;
        }
  },
  // 生命组件
  components:{
	  'myheader':header,
	  'myfooter':footer,
  }
}


</script>
 
<style>



</style>